(function(){

    const X = {
        provinces: {
            '陕西省' : [ '西安市' , '宝鸡市' , '咸阳市' , '汉中市' , '榆林市' , '渭南市' , '延安市' , '商洛市' , '铜川市' ] ,
            '甘肃省' : [ '兰州市' , '武威市' , '酒泉市' , '张掖市' , '金昌市' , '嘉峪关市' , '天水水'  , '定西市' , '庆阳市' , '陇南市' , '临夏' , '白银市' , '平凉市' , '甘南' ],
            '四川省' : [ '成都市' , '攀枝花市' , '绵阳市' , '德阳市' , '广元市' , '泸州' , '宜宾市' ]
        },
        provinceSelect: document.querySelector( '.province' ) ,
        citySelect: document.querySelector( '.city' ) ,
        append( select , names ){
            names.forEach( name => {
                let op = document.createElement( 'option' );
                op.innerText = name ;
                op.value = name.substring( 0 , name.length - 1 );
                select.appendChild( op );
            });
        },
        remove( select ){
            let ops = select.options ;
            for( let i = ops.length - 1 ; i > 0 ; i-- ){
                select.removeChild( ops[ i ] );
            }
        },
        changeListener: {
            handleEvent(event){
                let t = event.target ;
                let so = t.options[ t.selectedIndex ] ; 
                let provinceName = so.innerText ;
                X.remove(  X.citySelect );
                let cityNames = X.provinces[ provinceName ] ;
                X.append( X.citySelect , cityNames );
            }
        },
        init(){
            // 将所有省份添加到 .province 元素中
            let names = Object.getOwnPropertyNames( this.provinces );
            this.append( this.provinceSelect , names );
            // 监听 .province 元素中 option 切换事件
            this.provinceSelect.addEventListener( 'change' , this.changeListener , false );
        }
    }

    X.init(); // 调用初始化方法

})();